<template>
	<view >
		<scroll-view :style="{height:uniscreenHeight+'px'}" scroll-y="true" class="popular-card-scroll">
			<view style="width: 100%; display: flex;flex-direction: row;
    flex-wrap: wrap;    justify-content: center;">
				<view-card v-for="(item,index) in dataList" :key="index" @click="postscheck(item)"
					class="view-popular-card">
					<img style="width: 100%;border-radius: 20rpx;" :src="$globalUrl+item.postsCover">
					<text class="uni-body">{{item.postsArticletitle}}</text>
					<view class="card-actions">
						<view class="card-actions-item" style="margin-right: 75rpx;">
							<image style="width: 100%;height: 100%; border-radius: 50%;"
								:src="$globalUrl+item.avatarUrl" alt="" mode="scaleToFill" />
						</view>
						<view class="card-actions-item" style="" @click.stop="actionsClick(item)">
							<span v-if="item.likeState==1" class="iconfont">&#xe85c;</span>
							<uni-icons type="heart" size="16" color="#999" v-else></uni-icons>
							{{item.postsLikecount}}
						</view>
					</view>
				</view-card>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'//引入mapState
	import flowLayout from "@/components/eiml-flow/eiml-flow.vue"
	import {
		inertlikestate,
		cancellation
	} from '../api/likestateApi.js'
	export default {
		props: {
			dataList: {
				type: Array,
				default: 10,
			}
		},
		name: "Popular",
		data() {
			return {
				windowHeight: uni.getSystemInfoSync().windowHeight,
				likesTateStateDataView: [],
				likeinfo: true,
			};
		},
		methods: {
			onClick(e) {
				console.log(e)
			},
			//点赞
			actionsClick(item) {
				console.log(item)
				if (item.likeState == 1) {
					item.postsLikecount = parseInt(item.postsLikecount) - 1
					item.likeState = 0
					cancellation(item)
				} else {
					item.postsLikecount = parseInt(item.postsLikecount) + 1
					item.likeState = 1
					inertlikestate(item)
				}
			},
			postscheck(item) {
				uni.navigateTo({
					url: '/pages/index/details/details?article=' + JSON.stringify(item),
					animationDuration: 200
				})
			}
		},
		components: {
			flowLayout
		},
		computed: mapState({
			// 从state中拿到数据 箭头函数可使代码更简练
			uniscreenHeight: state => state.height,
		})
	}
</script>

<style lang="scss">
	.iconfont{
		font-size: 16px !important;
	}
	.popular-card-scroll {
		box-sizing: border-box;
		width: 100%;
	}

	.view-popular-card {
		width: 47%;
		height: 100%;
		margin: 10rpx;
		box-sizing: border-box;
		border-radius: 10px;

	}

	.uni-body {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		padding: 0 10rpx;
		font-size: 12px;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: nowrap;
		align-items: center;
	}

	.card-actions-item {
		width: 50rpx;
		height: 50rpx;
		margin: 10rpx 10rpx;
	}
</style>